<template>
	<view class="index">
		<!--头部轮播图-->
		<swiper class="top-swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for='(item, index) in bannerList' :key='index'>
				<image class="top-image" :src="item.image" @click="$gotoUrl('/pages/index/goodDetail?id=' + item.id)"
					mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		<view class="content">
			<!--更多好物-->
			<view class="navLink">
				<view class="lf">
					<view class="textCard" @click="$gotoUrl('/pages/index/moreGoods')">
						<view class="head">
							<text class="title">更多好物</text>
							<image class="arrow" src='@/static/home/rightArrow.png'></image>
						</view>
						<view class="text">PERIPHERY</view>
					</view>
					<view class="textCard" @click="$gotoUrl('/pages/index/inspirational')">
						<view class="head">
							<text class="title">灵感周边</text>
							<image class="arrow" src='@/static/home/rightArrow.png'></image>
						</view>
						<view class="text">JOINTLY</view>
					</view>
				</view>
				<view class="rg">
					<view class="card">
						<image src="@/static/home/logo.png" mode="aspectFill"></image>
						<view class="head">
							<view class="title">新风系统小程序 </view>
							<image class="miniicon" src='@/static/home/mini1.png'></image>
						</view>
						<view class="text">APPLETS</view>
					</view>
				</view>
			</view>
			<!--中间轮播图-->
			<swiper class='center-swiper' :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for='(item, index) in bannerList2' :key='index'>
					<image class="center-image" :src="item.image" @click="$gotoUrl('/pages/index/goodDetail?id=' + item.id)"
						mode="aspectFill"></image>
				</swiper-item>
			</swiper>
			<!--商品列表-->
			<view class="daliy-selection">
				<view class="daliy-title">每日精选 Daily Selection</view>
				<up-empty mode="list" v-if="!daliyList.length"></up-empty>
				<view class="list">
					<view v-for="(item, index) in daliyList" :key='item.id' class="item"
						@click="$gotoUrl('/pages/index/goodDetail?id=' + item.id)">
						<image :src="item.cover" mode="aspectFill"></image>
						<view class="cont">
							<view class='subtitle'>{{ item.title }}</view>
							<view class='num'>{{ item.buyNumber || '0' }}人已购买</view>
							<view class='price'>¥ {{ item.price }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script setup>
import { reactive, toRefs, onBeforeMount } from 'vue'
import {
	getAdver,
	getDailySelection
} from '@/api/index.js'
const state = reactive({
	bannerList: [],
	bannerList2: [],
	daliyList: []
})

async function loadAdver () {
	const res1 = await getAdver({
		type: 0
	})
	const res2 = await getAdver({
		type: 1
	})
	state.bannerList = res1.data
	state.bannerList2 = res2.data
}
async function loadDaliyData () {
	const res = await getDailySelection()
	state.daliyList = res.data.data
}

onBeforeMount(() => {
	loadAdver()
	loadDaliyData()
})

const { bannerList, bannerList2, daliyList } = toRefs(state)
</script>
<style lang="scss" scoped>
.top-swiper {
	height: 532rpx;

	.top-image {
		height: 532upx;
		width: 100%;
		background-size: cover;
	}
}

.content {
	padding: 36rpx;
	background: #FFFFFF;
	border-radius: 22rpx 22rpx 0rpx 0rpx;
	margin-top: -100rpx;
	position: relative;
	z-index: 1;
}

.center-swiper {
	height: 220rpx;
	border-radius: 22rpx 22rpx 22rpx 22rpx;
	overflow: hidden;
	margin-top: 36rpx;
	margin-bottom: 40rpx;

	.center-image {
		width: 100%;

	}
}

.navLink {
	display: flex;
	justify-content: space-between;

	.lf {
		width: 50%;

		.textCard {
			max-height: 180rpx;
			background: #F5F5F5;
			border-radius: 22rpx 22rpx 22rpx 22rpx;
			padding: 36rpx 36rpx 71rpx 36rpx;

			.head {
				display: flex;
				justify-content: space-between;
			}

			.title {
				font-weight: bold;
				font-size: 30rpx;
				line-height: 35rpx;
				color: #333333;
			}

			.text {
				font-weight: 500;
				font-size: 18rpx;
				color: #666666;
				line-height: 21rpx;
				margin-top: 6rpx;
			}


			.arrow {
				width: 45rpx;
				height: 11rpx;
			}


		}

		.textCard+.textCard {
			margin-top: 26rpx;
		}
	}

	.rg {
		border-radius: 22rpx 22rpx 22rpx 22rpx;
		position: relative;
		height: 365rpx;
		width: 50%;
		margin-left: 36rpx;
		background-color: #58DBCF;

		.card {
			padding: 36rpx;

			&>image {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
			}
		}


		.head {
			display: flex;
			align-items: center;

			image {
				width: 29rpx;
				height: 29rpx;
				margin-left: 10rpx;
			}
		}

		.title {
			font-weight: bold;
			font-size: 30rpx;
			line-height: 35rpx;
			color: #fff;
		}

		.text {
			font-weight: 500;
			font-size: 18rpx;
			color: #666666;
			line-height: 21rpx;
			margin-top: 6rpx;
		}
	}
}

.daliy-selection {
	.daliy-title {
		font-weight: 800;
		font-size: 30rpx;
		color: #333333;
		line-height: 35rpx;
		margin-top: 40rpx;
		margin-bottom: 32rpx;
	}

	.list {
		display: flex;
		gap: 34rpx;
		flex-wrap: wrap;
		justify-content: space-between;

		.item {
			width: 321rpx;
			background: #F5F5F5;
			overflow: hidden;
			border-radius: 22rpx;

			image {
				width: 100%;
				height: 321rpx;
			}

			.cont {

				padding: 24rpx;
			}

			.subtitle {
				font-weight: bold;
				font-size: 28rpx;
				color: #333333;
				line-height: 33rpx;
				margin-top: 8rpx;
			}

			.num {
				font-weight: 500;
				font-size: 20rpx;
				color: #58DBCF;
				line-height: 23rpx;
				margin-top: 8rpx;
			}

			.price {
				font-weight: 800;
				font-size: 30rpx;
				color: #FF0000;
				line-height: 35rpx;
				margin-top: 20rpx;
				margin-bottom: 4rpx;
			}
		}
	}
}
</style>